<template>
  <div class="pptist-editor visual-editor">
    <!-- 标题编辑 -->
    <!-- <input v-if="npmeInp == 'inpname_type_'" :id="'inpname_type_'" type="text" v-model="title" maxlength="10"
      placeholder="请填写文件标题" @blur="textblur" />
    <span v-else @click="textFocus" class="inp_span">{{ title }}</span>
    <i v-if="npmeInp == null" class="appIcon-iconfont appIcon-bianji inp_icon" @click="textFocus"></i> -->
    <!-- <div class="top-name">未命名标题</div> -->
    <EditorHeader class="layout-header" />
    <div class="content">
      <div class='bg-box'>
        <CanvasTool class="layer-left" />
        <div class="layer-right">

          <div class="layout-content">
            <div class="layout-content-center" :class="{ 'righthide': toggleBool }">
              <Canvas class="center-body" />
              <!-- <Remark
                    class="center-bottom" 
                    v-model:height="remarkHeight" 
                    :style="{ height: `${remarkHeight}px` }"
                  /> -->
            </div>
            <div class="layout-content-right" :class="{'hide': toggleBool}">
              <div class="btn-zhedie" @click="toggleRight()">
                <dd class="toggle_top"></dd>
                <dd class="toggle_bot"></dd>
                <!-- <i class="appIcon-iconfont appIcon-xiangzuo"></i>
                <i class="appIcon-iconfont appIcon-xiangzuo"></i> -->
              </div>
              <!-- <div class="tabs">
                <div class="tab" :class="{ 'active': currentTab === 1 }" @click="handleTab(1)">全部页面</div>
                <div class="tab" :class="{ 'active': currentTab === 0 }" @click="handleTab(0)">
                  <span v-if="slideIndex !== Infinity">页面设置</span>
                  <span v-if="slideIndex === Infinity">全局主题</span>
                </div>
              </div> -->
              <!-- <div class="tabs">
                <input type="radio" id="tab1" name="tab-control" checked>
                <input type="radio" id="tab2" name="tab-control">

                <ul>
                  <li title="Features" :class="{ 'active': currentTab === 1 }" @click="handleTab(1)">
                    <label for="tab1" role="button">
                      <span>全部页面</span>
                    </label>
                  </li>
                  <li title="Delivery Contents" :class="{ 'active': currentTab === 0 }" @click="handleTab(0)">
                    <label for="tab2" role="button">
                      <span v-if="!blankArea">页面设置</span>
                      <span v-if="blankArea">全局主题</span>
                    </label>
                  </li>
                </ul>
                <div class="slider" :class="{ 'translate': currentTab === 0 }">
                  <div class="indicator"></div>
                </div>
              </div>
              <Thumbnails v-show='currentTab === 1' class="layout-content-page" /> -->
              <Toolbar class="layout-content-item" />
            </div>

          </div>
        </div>
      </div>
    </div>
    <!-- <div class="layer-bottom">
      <EditorBottom></EditorBottom>
    </div> -->


  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'

import useGlobalHotkey from '@/hooks/useGlobalHotkey'
import usePasteEvent from '@/hooks/usePasteEvent'

import EditorHeader from './EditorHeader/index.vue'
import Canvas from './Canvas/index.vue'
import CanvasTool from './CanvasTool/index.vue'
import Thumbnails from './Thumbnails/index.vue'
import Toolbar from './Toolbar/index.vue'
// import EditorBottom from './EditorBottom/index.vue'
// import Remark from './Remark/index.vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { useRoute } from "vue-router";

export default defineComponent({
  name: 'editor',
  components: {
    EditorHeader,
    Canvas,
    CanvasTool,
    Thumbnails,
    Toolbar,
    // EditorBottom,
    // Remark,
  },
  setup() {
    const mainStore = useMainStore()
    const { slideIndex, blankArea } = storeToRefs(useSlidesStore())
    const { currentTab,canvasScale } = storeToRefs(mainStore)
    const remarkHeight = ref(40)
    const route = useRoute()
    
    useGlobalHotkey()
    usePasteEvent()

    const handleTab = (type: number) => {
      // currentTab.value = type
      mainStore.setCurrentTab(type)
    }
    const toggleBool = ref(false)
    const toggleRight = () => {
      toggleBool.value = !toggleBool.value
    }
    onMounted(() => {
      //根据参数判断是哪个编辑器  1可视化 2,自由编辑器
      const editorType: any = route.query.editorType || '2'
      const boolType = editorType == '1' || editorType == '2' || editorType == '3'
      if(editorType) {
        mainStore.$patch({
          EditorType: boolType ? editorType : '1'
        })
      }
    })
    return {
      remarkHeight,
      handleTab,
      currentTab,
      slideIndex,
      blankArea,
      toggleRight,
      toggleBool,
    }
  },
})
</script>

<style lang="scss" scoped>
// .tabs {
//   height: 40px;
//   font-size: 12px;
//   flex-shrink: 0;
//   display: flex;
//   user-select: none;
//   border-bottom: 1px solid $contentBorderColor;
// }

$blue: #a6a9ff;
$dark: #333;

$accent: $blue;
$accent-inactive: desaturate($accent, 85%);
$secondary: $accent-inactive;


/* tab setting */
$tab-count: 2;
$indicator-width: 16px;
$indicator-height: 4px;

/* breakpoints */
$breakpoints: (
  medium: #{$tab-count*250px},
  small:#{$tab-count*150px}
);


/* selectors relative to radio inputs */
$label-selector: "~ ul > li";
$slider-selector: "~ .slider";
$content-selector: "~ .content > section";

@mixin tabs($label-selector: $label-selector,
  $slider-selector: $slider-selector,
  $content-selector: $content-selector) {

  @for $i from 1 through $tab-count {
    &:nth-of-type(#{$i}):checked {
      #{$label-selector}:nth-child(#{$i}) {
        @content;
      }

      #{$slider-selector} {
        transform: translateX(#{100% * ($i - 1)});
      }

      #{$content-selector}:nth-child(#{$i}) {
        display: block;
      }
    }
  }
}

.tabs {
  // margin-top: 18px;
  padding: 24px 22px 17px;
  // background: white;
  // height: calc(100% - 158px);
  // background: rgba(255, 255, 255, 0.3);
  // border: 2px solid rgba(255, 255, 255, 1);
  // box-shadow: 0px 10px 40px 0px rgba(120, 116, 255, 0.1);
  // border-radius: 22px;
  // min-width: #{$tab-count * 60px};

  input[name="tab-control"] {
    display: none;
  }

  .content section h2,
  ul li label {
    font-size: 16px;
    color: #a6a9ff;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 400;
  }

  ul {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    // justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;

    li.active {
      label {
        color: #3e9bff;
      }
    }

    li {
      box-sizing: border-box;
      // flex: 1;
      width: calc(100% / 2);
      padding: 0 10px;
      text-align: center;

      label {
        // transition: all 0.3s ease-in-out;
        color: white;
        padding: 5px auto;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        white-space: nowrap;
        -webkit-touch-callout: none;
        // @include user-select(none);

        br {
          display: none;
        }

        svg {
          fill: $secondary;
          height: 1.2em;
          vertical-align: bottom;
          margin-right: 0.2em;
          transition: all 0.2s ease-in-out;
        }

        &:hover,
        &:focus,
        &:active {
          outline: 0;
          color: #3e9bff;

          svg {
            fill: lighten($secondary, 15%);
          }
        }
      }
    }
  }

  .slider {
    position: relative;
    width: calc(100% / 2);
    transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);

    &.translate {
      transform: translateX(100%) !important;
    }

    .indicator {
      position: relative;
      width: $indicator-width;
      max-width: 100%;
      margin: 0 auto;
      height: $indicator-height;
      background: #3e9bff;
      box-shadow: 0px 1px 4px 0px rgba(86, 82, 234, 0.4);
      border-radius: 2px;
    }
  }

  .content {
    // background: red;
    position: relative;
    height: calc(100% - 30px);
    overflow: hidden;

    section {
      display: none;

      animation: {
        name: content;
        direction: normal;
        duration: 0.3s;
        timing-function: ease-in-out;
        iteration-count: 1;
      }

      line-height: 1.4;

      h2 {
        color: $accent;
        display: none;

        &::after {
          content: "";
          position: relative;
          display: block;
          width: 30px;
          height: 3px;
          background: $accent;
          margin-top: 5px;
          left: 1px;
        }
      }
    }
  }

  input[name="tab-control"] {
    @include tabs {
      >label {
        cursor: default;
        font-size: 16px;
        // color: #a6a9ff;
        letter-spacing: 0;
        line-height: 18px;
        font-weight: 400;

        // svg {
        //     fill: $accent;
        // }

        @media (max-width: map-get($breakpoints, small)) {
          background: rgba(0, 0, 0, 0.08);
        }
      }
    }
  }

  @keyframes content {
    from {
      opacity: 0;
      transform: translateY(5%);
    }

    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }

  @media (max-width: map-get($breakpoints, medium)) {
    ul li label {
      white-space: initial;

      br {
        display: initial;
      }

      svg {
        height: 1.5em;
      }
    }
  }

  @media (max-width: map-get($breakpoints, small)) {
    ul li label {
      padding: 5px;
      border-radius: 5px;

      span {
        display: none;
      }
    }

    .slider {
      display: none;
    }

    .content {
      margin-top: 20px;

      section h2 {
        display: block;
      }
    }
  }
}

.line {
  margin-top: 6px;
  height: 1px;
  background: #EDF0FF;
  border-radius: 0.5px;
}

.tab {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;

  &.active {
    border-bottom: 2px solid $themeColor;
    color: $themeColor;
  }

  &+.tab {
    border-left: 1px solid $borderColor;
  }
}

.bg-box {
  display: flex;
}

.pptist-editor {
  height: 100%;
}

.layout-header {
  height: 62px;
}

.layer-left {
  padding-top: 0px;
  width: 54px;
  background: $defaultBlack;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.layer-right {
  width: calc(100% - 54px);
}

.layout-content {
  height: 100%;
  display: flex;
  background: radial-gradient(#616674 2%, transparent 2%) 0% 0% / 25px 25px, radial-gradient(#616674 4%, transparent 4%) $canvasBgColor;
    background-size: 25px 25px;
}

.layout-content-left {
  width: 160px;
  height: 100%;
  flex-shrink: 0;
  border-right: 1px solid $contentBorderColor;
}

.layout-content-center {
  width: calc(100% - 340px);
  transition: 0.5s all ease;
  transition-delay: .5s;
  .center-top {
    height: 40px;
  }
  &.righthide {
    width: 100%;
  }
}

.layout-content-right {
  width: 340px;
  height: 100%;
  background-color: $darkGray;
  border-left: 2px solid $defaultBlack;
  z-index: 998;
  transition: .5s all ease;
  position: absolute;
  right: 0;
  bottom: 0;
  height: calc(100vh - 62px);
  .btn-zhedie {
    cursor: pointer;
    display: block !important;
    position: absolute;
    left: -30px;
    top: 50%;
    width: 32px;
    dd {
      transition: .5s all ease;
      margin: 0 auto;
    }
    dd.toggle_top {
      width: 4px;
      border-radius: 2px 2px 0 0;
      height: 38px;
      left: 14px;
      background: rgba(64, 64, 67, 1);
    }
    dd.toggle_bot {
      width: 4px;
      border-radius: 0 0 2px 2px;
      height: 38px;
      left: 14px;
      background: rgba(64, 64, 67, 1);
      position: relative;
      top: -2px;
      left: 0;
    }
    &:hover {
      dd {
        background: #58585b;
        height: 42px;
        transform: scale(1.1);
      }
      dd.toggle_top {
        transform: rotate(-15deg)
      }
      dd.toggle_bot {
        transform: rotate(15deg);
      }
    }
  }

  &.hide {
    transform: translate(360px);

    .btn-zhedie {
      transform: rotateY(180deg);
    }
  }
}
</style>